<template>
	<view class="storageDetails">
		<Login></Login>
		<view class="searchpage" style="padding: 66rpx 38rpx 0 40rpx; box-sizing: border-box">
			<div style="display: flex; justify-content: space-between;">
				<div class="searchpage-top" style="font-size: 30rpx; font-weight: 600;">
					<input type="text" value="" placeholder="请输入物品名称" v-model="goodsData.goodsName" />
				</div>
				<div style="text-align: right; ">
					<text class="text1">删除</text>
					<text class="text2" @click="toStorageBox">保存</text>
				</div>
			</div>
			<view class="" style="width: 600rpx;display: flex;justify-content: space-between;box-sizing: border-box; padding-top: 42rpx; ">
				<swiper class="swiper" navigation :indicator-dots="true" :autoplay="true" :interval="2500" :duration="1000">
					<swiper-item v-for="(item,index) in goodsData.Image" :key="index">
						<view class="swiper-item">
							<image :src=item mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="" style="margin-top: 60rpx; height: 70rpx; display: flex;justify-content: center;">
				<view class="look" style="" @click="addImage">
					<text>添加图片</text>
				</view>
			</view>
			<view class="" style="width: 335px;height: 40px;background: #FFFFFF;border-radius: 5px; display: flex;margin-top: 40rpx;">
				<input type="text" placeholder="  请输入物品类型" style="font-size: 18px;margin-top: 10rpx;" v-model="goodsData.goodsIntroduce" />
			</view>
		</view>
	</view>
</template>

<script>
	import BaseUrl from "../../utlis/api.js"
	import Login from "../../common/login/login.vue";
	import fmt from "../../utlis/fmt.js"
	export default {
		components: {
			Login
		},
		data() {
			return {
				boxId: null, //物品数据
				bannerList: ["../../static/image/background.png", "../../static/image/background.png",
					"../../static/image/background.png"
				],
				goodsData: {
					goodsName: null, //物品名称
					goodsIntroduce: null, //物品类型
					boxId: null,
					timer: null,
					Image:[],
					userId:null
				},
				imageUrl:[]
			}
		},
		onLoad(option) {
			this.boxId=JSON.parse(option.params)
		},
		methods: {
			// 返回箱子
			toStorageBox() {
				if (this.goodsData.goodsName) {
					if(this.boxId ){
						const token = wx.getStorageSync('token') || [];
							const userId = wx.getStorageSync('userId');
							const timer = new Date().format("yyyy-MM-dd hh:mm:ss"); //创建时间
							this.goodsData.boxId = this.boxId //物品盒子ID
							this.goodsData.goodsImage=this.goodsData.Image.toString()
							this.goodsData.timer = timer;
							this.goodsData.userId = userId;
							uni.request({
								url: BaseUrl+"/wx/sbox/goods",
								method: 'POST',
								data: this.goodsData,
								header: {
									"Authorization": "Bearer " + token,
								},
								success: (res) => {
									console.log(res)
									if (res.data.code == 200) {
										uni.showToast({
											title: res.data.msg
										});
										let pages = getCurrentPages(); // 当前页面
										let beforePage = pages[pages.length - 2]; // 上一页
										uni.navigateBack({
											success: function() {
												beforePage.onLoad(); // 执行上一页的onLoad方法
											}
										});
									}
								}
							})
						} else {
							uni.showToast({
								title: "请输入名称"
							});
						}
						
					}
			},
			// 添加图片事件
			addImage() {
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        // 获取的格式是数组，多选会同时返回，单选只返回一项
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						console.log(tempFilePaths)
				        // 若多选，需循环调用uni.uploadFile ，因微信小程序只支持单文件上传
						const token = wx.getStorageSync('token') || [];
				        uni.uploadFile({
				            url: BaseUrl+'/common/upload', 
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'imageUrl'  // 上传附带参数
				            },
							header: {
								"Authorization": "Bearer " + token,
							},
				            success: (uploadFileRes) => {
								uploadFileRes.data=JSON.parse(uploadFileRes.data)
								if(uploadFileRes.data.code!==200){
									return uni.showToast({
										title:uploadFileRes.data.msg,
										icon:Error
									})
								}
								console.log(uploadFileRes.data.url)
								this.goodsData.Image.push(uploadFileRes.data.url)
								console.log(this.goodsData.Image)
				            }
				        });
				    }
				});
			}
		}
	}
</script>

<style>
	.storageDetails {
		width: 100%;
		height: 100%;
		background-color: #c3b18b;
	}

	.searchpage {
		width: 100%;
		height: 100%;
		background-color: #f9f7f2;
		border-radius: 20rpx;
	}

	.searchpage-top {
		width: 33%;
		height: 25px;
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 26px;
		color: #000000;
		opacity: 0.7;
	}

	.text1 {
		width: 24px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.6;
		margin-right: 20rpx;
	}

	.text2 {
		width: 48px;
		height: 17px;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 26px;
		color: #000000;
		opacity: 0.6;
	}

	.weui-cells {
		display: inline-block;
		width: 254px;
		height: 32px;
		border: 1px solid #000;
		opacity: 0.3;
		border-radius: 10px;
	}

	.mini-btn {
		width: 61px;
		height: 32px;
		margin-top: 70rpx;
		background: #ffcf00;
		opacity: 1;
		border-radius: 10px;
	}

	.whitebg {
		whitebgwidth: 120px;
		height: 40px;
		background: #fff;
		opacity: 0.9;
		border-radius: 10px;
		font-weight: 800;
		line-height: 52rpx;
		color: #000000;
		font-size: 24rpx;
		box-sizing: border-box;
		padding: 15rpx;
	}

	.swiper {
		width: 100%;
		height: 300rpx;
	}

	.look {
		width: 270rpx;
		height: 100%;
		background: #FFCF00;
		opacity: 1;
		border-radius: 36rpx;
		text-align: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 70rpx;
		color: #FFFFFF;
		opacity: 1;
	}

	.icon {
		color: #FFCF00;
	}

	.icon1 {
		color: #707070;
		font-size: 60rpx;
	}

	.testt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 26px;
		color: #000000;
		opacity: 1;
	}
</style>
